<html>
<head>
    <title>WEB</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="../icon/favicon.ico" rel="shortcut icon"/>
    <link href="../css/i2f-css.css" rel="stylesheet" type="text/css"/>
    <link href="../css/i2f-theme.css" rel="stylesheet" type="text/css"/>
    <link href="../css/i2f-animation.css" rel="stylesheet" type="text/css"/>

</head>
<body>
<div>
    <a class="i-a" href="../css/i2f-css.css" target="_self" download="i2f-css.css">[样式下载]</a>

    <div class="i-button i-round i-ani-fade-color ">OK</div>
    <div class="i-button i-round i-ani-fade-bgcolor ">OK</div>
    <div class="i-button i-round i-ani-active ">OK</div>
    <div class="i-button i-round i-ani-shake ">OK</div>
    <div class="i-button i-round i-ani-bounce ">OK</div>
    <div class="i-button i-round i-ani-spin ">OK</div>
    <div class="i-button i-round i-ani-swing ">OK</div>
    <div class="i-button i-round i-ani-click ">OK</div>
    <div class="i-button i-round i-ani-breath ">OK</div>


    <button class="i-button i-round i-ani-breath ">OK</button>
    <input type="button" class="i-button i-round i-ani-breath " value="OK"></input>

    <hr/>

    <input type="text" class="i-input i-ani-fade-in-right " value="OK"></input>
    <input type="radio" class="i-input i-ani-fade-in-right " value="OK"></input>
    <input type="checkbox" class="i-input i-ani-fade-in-right " value="OK"></input>

    <textarea class="i-input i-ani-fade-in-right " value="OK"></textarea>

    <hr/>

    <div class="i-button i-round i-ani-fade-in-bounce" style="width: 48px;height: 48px;">
        1
    </div>

    <div class="i-button i-round i-ani-fade-in-bounce-right" style="width: 48px;height: 48px;">
        1
    </div>

    <div class="i-button i-round i-ani-fade-in-bounce-left" style="width: 48px;height: 48px;">
        1
    </div>


    <hr/>

    <div class="i-card card-size i-ani-fade-in-left-down i-theme-box-blue i-theme-body-blue i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-blue i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-down i-theme-box-red i-theme-body-red i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-red i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-right-down i-theme-box-green i-theme-body-green i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-green i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div class="i-text-ellipsis">
                DD平台222222222222222222222222222222222222222222222222222
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-right i-theme-box-purple i-theme-body-purple i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-purple i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div class="i-text-wrap-scroll">
                <div class="i-text-wrap-scroll-item">
                    DD平台222222222222222222222222222222222222222222222222222
                </div>
            </div>

        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-bounce i-theme-box-pink i-theme-body-pink i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-pink i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台222222222222222222222222222222222222222222222222222
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-left i-theme-box-orange i-theme-body-orange i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-orange i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台222222222222222222222222222222222222222222222222222
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-left-up i-theme-box-gold i-theme-body-gold i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-gold i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-up i-theme-box-deepblue i-theme-body-deepblue i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-deepblue i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>


    <div class="i-card card-size i-ani-fade-in-right-up i-theme-box-black i-theme-body-black i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-black i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-breath i-theme-box-tea i-theme-body-tea i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-tea i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-bounce-right i-theme-box-tea i-theme-body-tea i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-tea i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-bounce-left i-theme-box-tea i-theme-body-tea i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-tea i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-bubble-up i-theme-box-tea i-theme-body-tea i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-tea i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-bubble-down i-theme-box-tea i-theme-body-tea i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-tea i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-bubble-left i-theme-box-tea i-theme-body-tea i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-tea i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-bubble-right i-theme-box-tea i-theme-body-tea i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-tea i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-rotate-right i-theme-box-tea i-theme-body-tea i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-tea i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-rotate-left i-theme-box-tea i-theme-body-tea i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-tea i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-page-down i-theme-box-tea i-theme-body-tea i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-tea i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-page-up i-theme-box-tea i-theme-body-tea i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-tea i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-page-right i-theme-box-tea i-theme-body-tea i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-tea i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>

    <div class="i-card card-size i-ani-fade-in-page-left i-theme-box-tea i-theme-body-tea i-inline i-float-left">
        <div class="i-center i-scrollbar i-hover-scroll" style="width: 60%">
            <div class="i-theme-title-tea i-round">
                闵A12345
            </div>
            <div>
                07:00-09:00
            </div>
            <div>
                安平线
            </div>
            <div>
                周明生
            </div>
            <div>
                私家车
            </div>
            <div>
                DD平台
            </div>
        </div>
    </div>
    <hr style="clear: both"/>

    <div class="card-size bg-card">
        <div class="i-center i-blur-glass-5" style="width: 80%">
            <h1>标题</h1>
            <div>内容</div>
        </div>
    </div>


</div>
</body>
<style>
    .card-size {
        width: 30%;
        height: 220px;
    }

    .bg-card {
        background: url("../icon/favicon.ico") no-repeat center;
        background-size: 100% 100%;
    }
</style>

</html>
